<!--
 * @Descripttion: 
 * @version: 
 * @Author: 高月飞
 * @Date: 2023-11-18 11:02:31
 * @LastEditors: 高月飞
 * @LastEditTime: 2023-11-23 18:53:14
-->
<template>
    <div>
        <div class="asidTOP">
            <i :class="['iconfont', valueIndexListicon, 'iconStylue']"></i>
            <span>{{ valueIndexListMenu }}</span>
        </div>
        <el-divider />
        <el-menu active-text-color="red" background-color="#545c64" class="el-menu-vertical-demo" text-color="#fff"
            :default-active="defaultActivePath" router>
            <el-menu-item v-for=" value  in  valueIndexListChildren " :key="value.path" :index="value.path">
                <el-icon>
                    <component :is="value.meta?.icon" />
                </el-icon>
                {{ value.meta?.menu }}
            </el-menu-item>

        </el-menu>
    </div>
</template>
  
<script setup lang="ts">
import { pa } from 'element-plus/es/locale/index.mjs';
import { watch } from 'vue';
import { defineProps, reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
interface IProps {
    valueIndexListChildren: any
    valueIndexListMenu: string
    valueIndexListicon: string
    itemRouter: string
    valueIndexListRouter: string
    valueIndexList: any
}
const props = defineProps<IProps>();
const childrenRoouter = ref<any>([])
const router = useRouter()
const defaultActivePath = ref<any>(props.itemRouter || props.valueIndexListRouter);
watch(() => router.currentRoute.value, (to) => {
    defaultActivePath.value = to.path;
});
childrenRoouter.value = props.valueIndexList.value.children
</script>

<style lang="scss" scoped>
.asidTOP {
    height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;

}



.iconStylue {
    margin-bottom: -20px;
    font-size: 40px;
}
</style>
  